/*
 * @Author: songjian
 * @Date: 2018-11-07 11:06:16
 * @Last Modified by: songjian
 * @Last Modified time: 2018-11-08 15:54:13
 */

import React from 'react';
import Child from './Child';
import { Switch, Radio, Input } from 'antd';

import styles from './index.module.less';

const RadioGroup = Radio.Group;

export default class PhasedTransaction extends React.Component {
  state = {
    title: [
      '分阶段付款',
      '交易流程',
      '交易流程',
      '重要说明',
    ],
    value: 1,
  }

  onSwitchChange = e => {
    console.log(e);
  }

  onRadioChange = e => {
    console.log('radio checked', e.target.value);
    this.setState({
      value: e.target.value,
    });
  }

  render() {
    const { title } = this.state;

    const contentOne =
      <div className={styles.content_one}>
        <div className={styles.p}>根据双方约定，以首付款，尾款的形式进行交易</div>
        <div className={styles.span_box}>
          <span className={styles.img}></span>
          <span className={styles.word}>支付定金，缓解买家资金压力</span>
        </div>
      </div>;

    const contentTwo =
      <div className={styles.content_two + ' ' + styles.clearfix}>
        <div className={styles.p + ' ' + styles.item1}>1.买家选择分阶段付款方式下单</div>
        <div className={styles.right_line + ' ' + styles.item2}></div>
        <div className={styles.p + ' ' + styles.item3}>2.买家支付首付款</div>
        <div className={styles.right_line + ' ' + styles.item4}></div>
        <div className={styles.p2 + ' ' + styles.item5}>卖家发货</div>
        <div className={styles.broken_line + ' ' + styles.item6}></div>
        <div className={styles.p + ' ' + styles.item7}>3.买家支付尾款</div>
        <div className={styles.left_line + ' ' + styles.item8}></div>
        <div className={styles.p + ' ' + styles.item9}>4.买家确认收货</div>
        <div className={styles.left_line + ' ' + styles.item10}></div>
        <div className={styles.p2 + ' ' + styles.item11}>交易完成</div>
      </div>;

    const radioStyle = {
      display: 'block',
      height: '30px',
      lineHeight: '30px',
    };

    const contentThree =
      <div className={styles.content_three}>
        <div className={styles.top_box}>
          <div className={styles.p}>1.开通分阶段付款服务</div>
          <div className={styles.content}>
            <span className={styles.img}></span>
            <span className={styles.word}>分阶段付款</span>
            <Switch className={styles.switch} onChange={this.onSwitchChange} />
          </div>
        </div>
        <div className={styles.bottom_box}>
          <div className={styles.p}>2.分阶段付款设置</div>
          <div className={styles.content}>
            <RadioGroup className={styles.radio_group} onChange={this.onRadioChange} value={this.state.value}>
              <Radio style={radioStyle} value={1}>所有货品支持分阶段付款：</Radio>
              <Radio style={radioStyle} value={2}>分阶段付款的方式：3/7</Radio>
            </RadioGroup>
            <div className={styles.tips}>
              说明：若想全部货品支持分阶段付款方式，请勾选以上选项。若想部分货品支持分阶<br/>
              段付款方式，请不要勾选以上选项，请前往商品发布页面进行设置。
            </div>
          </div>
        </div>
      </div>;

    const contentFour =
      <div className={styles.content_four}>
        <div className={styles.p}>1.分阶段付款分为2个阶段，分别为首付款和尾款</div>
        <div className={styles.p}>2.如买卖双方对于费用等另有约定，请在订单备注中写明。发生纠纷后，如不能提供相应的备注记录或其它书面证明，则首付款统一按货款处理。</div>
        <div className={styles.p}>3.买卖双方如遇到任何货款或是其他争议，可协商进行退款/退货退款/退部分款。</div>
      </div>;

    return (
      <div>
        <div className={styles.child}>
          <Child title={title[0]} content={contentOne}></Child>
        </div>
        <div className={styles.child}>
          <Child title={title[1]} content={contentTwo}></Child>
        </div>
        <div className={styles.child}>
          <Child title={title[2]} content={contentThree}></Child>
        </div>
        <div>
          <Child title={title[3]} content={contentFour}></Child>
        </div>
      </div>
    );
  }
}
